@charset "utf-8";
@import "reset";
$zcm:40;
@function r($px) {
    @return $px/(2*$zcm) * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
}

header {
    width: 100%;
    height: r(76);
    background: white;
    position: absolute;
    top: 0;
    a:nth-of-type(1) {
        display: block;
        color: #000000;
         height: r(76);
        margin-left: r(28);
        line-height: r(76);
        vertical-align: middle;
        img{
            width: r(22);
            height: r(38);
            vertical-align: top;
            position: relative;
            top: r(16);
        }
    }
    p{
        font-size: r(30);
        text-align: center;
        height: r(76);
        line-height: r(76);
        overflow: hidden;
    }
    a:nth-of-type(2) {
        display: block;
        font-size: r(24);
        //line-height: r(76);
        color: #000;
        height: r(76);
        line-height: r(76);
        margin-right: r(28);
        vertical-align: middle;
    }
}

section {
    width: 100%;
    background: white;
    position: absolute;
    top: r(76);
    bottom: r(80);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    article {
        .line {
            width: 100%;
            height: r(1);
            border-top: 1px solid #A7A7A7;
            background: #A7A7A7;
        }
        ul {
            width: r(584);
            margin: 0 auto;
            p{
                font-size: r(20);
                line-height: r(40);
            }
            span {
                font-size: r(24);
            }
            li {
                line-height: r(79);
                width: 100%;
                input {
                    border: none;
                }
            }
            li:nth-child(1) {
                input {
                    width: r(344);
                }
            }
            li:nth-child(2) {
                input {
                    width: r(120);
                }
            }
            li:nth-child(-n+3) {
                border-bottom: 1px solid #cacaca;
            }
            .div1 {
                width: 100%;
                height: r(28);
                background: #F2F2F2;
            }
            li:nth-child(5) {
                border-bottom: 1px solid #cacaca;
            }
            li:nth-child(6) {
                border-bottom: 1px solid #cacaca;
            }
            li:nth-child(7) {
                border-bottom: 1px solid #cacaca;
            }
            li:nth-child(8) {
                border-bottom: 1px solid #cacaca;
            }
            li:nth-child(11) {
                background: #F2F2F2;
                input {
                    background-color: transparent;
                }
            }
            li:nth-child(12) {
                button {
                    width: r(32);
                    height: r(32);
                    background: url(../img/add.png);
                    background-color: #000000;
                    background-size: 100% 100%;
                    line-height: r(79);
                    border: none;
                }
            }
            li:nth-child(13) {
                background: #F2F2F2;
                input {
                    background: transparent;
                }
            }
            
            li:nth-child(14) {
                margin-top: r(27);
                .cover_img {
                    height: r(180);
                    width: r(180);
                    position: relative;
                    cursor: pointer;
                    border-radius: 4px;
                    overflow: hidden;
                    display: inline-block;
                    *display: inline;
                    *zoom: 1;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    input {
                        position: absolute;
                        font-size: 100px;
                        right: 0;
                        top: 0;
                        opacity: 0;
                        filter: alpha(opacity=0);
                        cursor: pointer
                    }
                }
                .detail_img {
                    height: r(180);
                    width: r(180);
                    position: relative;
                    cursor: pointer;
                    border-radius: 4px;
                    overflow: hidden;
                    display: inline-block;
                    *display: inline;
                    *zoom: 1;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    input {
                        position: absolute;
                        font-size: 100px;
                        right: 0;
                        top: 0;
                        opacity: 0;
                        filter: alpha(opacity=0);
                        cursor: pointer
                    }
                }
            }
        }
    }
}

footer {
    width: 100%;
    height: r(80);
    background: #333333;
    position: absolute;
    bottom: 0;
    a{
        font-size: r(30);
        color: white;
        text-align: center;
        display: block;
        line-height: r(80);
    }
}